<template>
 <div style="width:100%;height: 95%;display: flex;flex-direction: column;justify-content: space-between;">
 <div style="height:80%;margin-top: 2%;">
    <el-table
            :data="devStatusData"
            highlight-current-row
            :header-cell-style="{'text-align':'center','background-color':'#104662'}"
            :cell-style="{'text-align':'center','background-color': 'rgb(5,33,56)','border':'1px solid #104662','color':'#fff'}"
            
            style="width: 95%; margin-left: 2%"
            @cell-dblclick="handleRowDblclick"

        >
          <el-table-column
            prop="number"
            label="序号"
            min-width="8%"
            show-overflow-tooltip
          />
          <el-table-column
            prop="date"
            label="上报时间"
            min-width="10%"
            show-overflow-tooltip
          />
          <el-table-column
            prop="failureSystem"
            label="故障系统"
            min-width="8%"
            show-overflow-tooltip
         />
         <el-table-column
            prop="failureContent"
            label="故障内容"
            min-width="25%"
            show-overflow-tooltip
         />
         <el-table-column
            prop="failureLevel"
            label="故障级别"
            min-width="8%"
            show-overflow-tooltip
         />
          <!-- <el-table-column
            prop="isDeal"
            label="是否解决"
            min-width="10%"
            show-overflow-tooltip
         /> -->
    <el-table-column label="故障分析"
        min-width="10%"
    >
      <template slot-scope="scope">
        <el-button style="margin:auto;" class="buttonInrRow" v-show="scope.$index<pageNum"
          @click="handleRead(scope.$index, scope.row) " >查看</el-button>
      </template>
    </el-table-column>
    <el-table-column label="操作"
    min-width="10%"
    >
      <template slot-scope="scope">
        <el-dropdown trigger="click" size="mini" placement="bottom-start">
        <el-button
          style="margin:auto" class="buttonInrRow"  v-show="scope.$index<pageNum"
          >忽略</el-button>
          <el-dropdown-menu slot="dropdown" class="drowMenu" >
            <el-dropdown-item ><div @click="handleIgnore(scope.$index, scope.row)">确认</div></el-dropdown-item>
            <el-dropdown-item>取消</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </el-table-column>
    <el-table-column label="查看图片"
        min-width="7%"
    >
      <template slot-scope="scope">
        <el-button style="margin:auto;" class="buttonInrRow" v-show="scope.$index<pageNum"
          @click="lookPic(scope.$index, scope.row) " >图片</el-button>
      </template>
    </el-table-column>
        </el-table>
        <el-table
            :data="failureanalysisData"
            :header-cell-style="{'text-align':'center','background-color':'#104662',}"
            :cell-style="{'text-align':'center','background-color': 'rgb(5,33,56)','border':'1px solid #104662','color':'#fff'}"
            :cell-class-name="cellClass"
            style="width: 95%;margin-left: 2%;"
            :span-method="arraySpanMethod"
            :show-header="false"
        >
          <el-table-column
            prop="title"
            label="序号"
            min-width="8%"
            show-overflow-tooltip
          />
          <el-table-column
            prop="type"
            label="上报时间"
            min-width="18%"
            show-overflow-tooltip
          />
          
         <el-table-column
            prop="context"
            label="故障内容"
            min-width="60%"
            show-overflow-tooltip
         />
         
        </el-table>
      </div>
  <div style="margin-top: 3%;height: 8%; display: flex;flex-direction:row ; justify-content: space-between;align-items: center;">
    <div style="width: 50%;height: 100%;margin-left: 2%; display: flex;flex-direction:row ;justify-content: flex-start;align-items: center;">
      <el-button size="small" type="primary" class="buttonAng" style="margin: 0;" @click="CreatData">增加</el-button>
      <el-button :disabled="modbuttonStatus==false" size="small" type="primary" :class="modClass" style="margin: 0 8% 0 2%;" @click="ModelData">修改</el-button>
      <!-- <el-select v-model="SelectValue" size="mini" :popper-append-to-body="false"  placeholder="请选择">
        <el-option
          
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
    </el-select> -->
    </div>
    
  <div style="width: 50%;height: 100%;margin-left: 1%;margin-right:0% ;display: flex;flex-direction:row ;align-items: center;">
    <el-date-picker 
      style="width: 70%;"
      popper-class="datePicker"
      size="mini"
      v-model="datapick"
      type="datetimerange"
      value-format="yyyy-MM-dd HH:mm:ss"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
      <el-button size="small" type="primary" style="width:20%;height:90%;line-height: 2%;margin: 0 0 0 2%;" @click="selectData">检索</el-button>
    </div>
      <el-pagination
        style="margin-right: 2%;"
        :small="true"
        :page-size="hisParam.pageSize"
        :pager-count="5"
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :hide-on-single-page="false"
        :total="total">
      </el-pagination>
    </div>
    <his-dialog 
    :dialogTitle="dialogTitle"
      :visible.sync="dialogVisible"
      :addData="addData"
      @updateVisible="updateVisible"
      @resetPopupData="resetPopupData"
      @submitPopupData="submitPopupData"
      @handleClose="handleClose"
      :popupWidth="'700px'"
    >
    </his-dialog>
    <his-dialogmod
    :dialogTitle="dialogTitle"
      :visible.sync="dialogVisiblemod"
      :modData="modData"
      @updateVisible="updateVisible"
      @resetPopupData="resetPopupData"
      @submitPopupData="submitPopupData"
      @handleClose="handleClose"
      :popupWidth="'700px'">

    </his-dialogmod>
 </div>
</template>

<script>
import {gethistoryFault,getisIgnore} from '../../api/failureanalysis.js'
import HisDialog from './HisDialog'
import HisDialogmod from './HisDialogmod'
export default {
  components: { HisDialog, HisDialogmod},
    data() {
        return {
          total:1,
          //请求参数
          hisParam:{
                    valvehallId:1,
                    pageCurrent:1,
                    pageSize: 6,
                    startTime:'',
                    endTime:''
          },
          //当前页面数
          pageNum:0,
          SelectValue: '',
          datapick: '',
          devStatusData: [
              {
                  number: 1,
                  date: '',
                  failureSystem: '',
                  //描述对应description
                  failureContent: '',
                  failureLevel: '',
                  faultposition:'',
                  faultcause:'',
                  whethersolve:'',
                  handingmethod:'',
                  //事件id
                  id:'',
                  faultanalysis:'',

              },
              {
                  number: 2,
                  date: '',
                  failureSystem: '',
                  //描述对应description
                  failureContent: '',
                  failureLevel: '',
                  faultposition:'',
                  faultcause:'',
                  whethersolve:'',
                  handingmethod:'',
                  //事件id
                  id:'',
                  faultanalysis:'',
              },
              {
                  number: 3,
                  date: '',
                  failureSystem: '',
                  //描述对应description
                  failureContent: '',
                  failureLevel: '',
                  faultposition:'',
                  faultcause:'',
                  whethersolve:'',
                  handingmethod:'',
                  //事件id
                  id:'',
                  faultanalysis:'',
              },
              {
                  number: 4,
                  date: '',
                  failureSystem: '',
                  //描述对应description
                  failureContent: '',
                  failureLevel: '',
                  faultposition:'',
                  faultcause:'',
                  whethersolve:'',
                  handingmethod:'',
                  //事件id
                  id:'',
                  faultanalysis:'',
              },
              {
                  number: 5,
                  date: '',
                  failureSystem: '',
                  //描述对应description
                  failureContent: '',
                  failureLevel: '',
                  faultposition:'',
                  faultcause:'',
                  whethersolve:'',
                  handingmethod:'',
                  //事件id
                  id:'',
                  faultanalysis:'',
              },
              {
                  number: 6,
                  date: '',
                  failureSystem: '',
                  //描述对应description
                  failureContent: '',
                  failureLevel: '',
                  faultposition:'',
                  faultcause:'',
                  whethersolve:'',
                  handingmethod:'',
                  //事件id
                  id:'',
                  faultanalysis:'',
              },
          ],
          devStatusDataInit: [
              {
                  number: 1,
                  date: '',
                  failureSystem: '',
                  //描述对应description
                  failureContent: '',
                  failureLevel: '',
                  faultposition:'',
                  faultcause:'',
                  whethersolve:'',
                  handingmethod:'',
                  //事件id
                  id:'',
                  faultanalysis:'',

              },
              {
                  number: 2,
                  date: '',
                  failureSystem: '',
                  //描述对应description
                  failureContent: '',
                  failureLevel: '',
                  faultposition:'',
                  faultcause:'',
                  whethersolve:'',
                  handingmethod:'',
                  //事件id
                  id:'',
                  faultanalysis:'',
              },
              {
                  number: 3,
                  date: '',
                  failureSystem: '',
                  //描述对应description
                  failureContent: '',
                  failureLevel: '',
                  faultposition:'',
                  faultcause:'',
                  whethersolve:'',
                  handingmethod:'',
                  //事件id
                  id:'',
                  faultanalysis:'',
              },
              {
                  number: 4,
                  date: '',
                  failureSystem: '',
                  //描述对应description
                  failureContent: '',
                  failureLevel: '',
                  faultposition:'',
                  faultcause:'',
                  whethersolve:'',
                  handingmethod:'',
                  //事件id
                  id:'',
                  faultanalysis:'',
              },
              {
                  number: 5,
                  date: '',
                  failureSystem: '',
                  //描述对应description
                  failureContent: '',
                  failureLevel: '',
                  faultposition:'',
                  faultcause:'',
                  whethersolve:'',
                  handingmethod:'',
                  //事件id
                  id:'',
                  faultanalysis:'',
              },
              {
                  number: 6,
                  date: '',
                  failureSystem: '',
                  //描述对应description
                  failureContent: '',
                  failureLevel: '',
                  faultposition:'',
                  faultcause:'',
                  whethersolve:'',
                  handingmethod:'',
                  //事件id
                  id:'',
                  faultanalysis:'',
              },
          ],
          failureanalysisData:[
            {
              title:'故障分析',
              type:'可能原因',
              context:''
            },
            {
              title:'故障分析',
              type:'可能故障位置',
              context:''
            },
            {
              title:'故障分析',
              type:'检修方法',
              context:''
            },
          ],
          headerClass: {
              'text-align': 'center',
              'background': '#072D45',
              'height': '10px'
          },
          t_tableRowClassName(row, rowIndex) {
              if (rowIndex % 2 === 0) {
                  return 'row-background';
              }
          },
          dialogVisible: false, // 弹框的出现与否
          dialogTitle: '通过', // 标题
          dialogVisiblemod:false,//修改功能弹窗
          addData:{
            eventId:'',
            time:''
          },//把要增加的事件id和时间传进去
          modData:{
              eventId:'',
              time:'',
              faultSystem: '',
              whetherSolve:'',
              faultPosition:'',
              faultAnalysis:'',
              faultCause:'',
              handingMethod:'',

          },
          //改变修改按钮的禁用状态
          modbuttonStatus:false,
          //改变修改按钮的外观
          modClass:"buttonAngBefore"
      }
  },
  methods: {
      CreatData(){
        this.dialogVisible = true
      },
      ModelData(){
        this.dialogVisiblemod = true
      },
      //初始化页面数据
      InitData(){
        this.devStatusData=JSON.parse(JSON.stringify(this.devStatusDataInit))
        this.InitFailureanalysisData()
      },
      //查询按钮，先初始化，再赋值
      selectData(){
        this.InitData()
        this.historyFault()
      },
      handleCurrentChange(val) {
          console.log("当前页"+val)
          this.param.pageCurrent = val
          this.historyFault()
      },
      handleRead(index, row) {
          this.modbuttonStatus = true
          this.modClass = "buttonAng"
          this.setFailureanalysisData(row)
          this.addDialogData(row)
          this.modDialogData(row)
          console.log("点击了第",index,row);
      },
      handleIgnore(index, row) {
          console.log("点击了忽略",index,row);
          this.InitData()
          let IgnoreParam={};
          IgnoreParam.valvehallId = row.id;
          IgnoreParam.time = row.date;
          getisIgnore(IgnoreParam.valvehallId,IgnoreParam.time).then(response => {
            console.log(response.data)
            this.refreshData(response.data)
            this.$message({
                  type: 'success',
                  message: '忽略成功!'
              })
          }).catch(() => {
              this.$message({
                  type: 'success',
                  message: '忽略失败!'
              })});
          
              // this.$message({
              //     type: 'success',
              //     message: '忽略成功!'
              // });
          // this.$confirm('确定忽略该故障吗?', '提示', {
          //     confirmButtonText: '确定',
          //     cancelButtonText: '取消',
          //     type: 'warning'
          // }).then(() => {
          //     this.$message({
          //         type: 'success',
          //         message: '忽略成功!'
          //     });
          // }).catch(() => {
          //     this.$message({
          //         type: 'info',
          //         message: '已取消忽略'
          //     });
          // });
      },
      handleCommand(command) {
      console.log('click on item ' + command);
    },
    //查看图片函数
    lookPic(index, row){
      let sendParam ={};
      sendParam.eventId = row.id
      sendParam.time = row.date
      this.$emit("picParam",sendParam)
    },
      handleRowDblclick(row, column, event) {
          this.addDialogData(row)
          this.modDialogData(row)
          this.setFailureanalysisData(row)
      },
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 5 === 0) {
          return {
            rowspan: 5,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    cellClass({ row, column, rowIndex, columnIndex }){
      let calssName = "cellusul";
      if(rowIndex==0 && columnIndex==0){
        calssName ="cellAdd"
      }
      return calssName
    },
    //故障列表赋值
    setFailureanalysisData(row){
      // this.failureanalysisData.forEach(element => {
      //   element.context = this.devStatusData[row-1];
      // });
      console.log("row",row)
      this.failureanalysisData[0].context = row.faultanalysis;
      this.failureanalysisData[1].context = row.faultcause;
      this.failureanalysisData[2].context = row.handingmethod;
    },
    //初始化故障列表
    InitFailureanalysisData(){
      this.failureanalysisData.forEach(element => {
        element.context=""
      })
    },
    // 修改是否让页面显示与隐藏的事件
  updateVisible (val) {
    this.dialogVisible = val
  },
  // 点击取消的事件
  resetPopupData () {
    //  这里可重置数据
    this.dialogVisible = false
    this.dialogVisiblemod = false
  },
  // 点击确定的按钮
  async submitPopupData () {
    this.dialogVisible = true
    this.dialogVisiblemod = false
  },
  // 关闭弹框（头部的X）
  handleClose () {
    this.dialogVisible = false
    this.dialogVisiblemod = false
  },
  //忽略请求
  sendIgnore(){
    getisIgnore(id,time).then(response => {
      console.log(response.data)
    })
  },
  // 设备历史故障请求
  historyFault(){        
      if(this.datapick==''||this.datapick==null){
        delete this.hisParam.startTime;
        delete this.hisParam.endTime;
      }else{
        this.hisParam.startTime = this.datapick[0]
        this.hisParam.endTime = this.datapick[1]
      }        
      gethistoryFault(this.hisParam).then(response => {
        console.log('lishi',response.data.records)
        this.refreshData(response.data)
    })
  },
  //刷新模板数据
  refreshData(requestData){
          let temp = this.devStatusData;
          let recordsdata = requestData.records
          this.pageNum = requestData.records.length
          this.total= requestData.total
          recordsdata.forEach(function(item,index) {
            temp[index].date=item.time
            temp[index].failureSystem=item.faultsystem
            temp[index].failureContent=item.description
            temp[index].failureLevel=item.faultlevel
            temp[index].faultposition=item.faultposition
            temp[index].faultcause=item.faultcause
            temp[index].whethersolve=item.whethersolve
            temp[index].handingmethod=item.handingmethod
            temp[index].id=item.id
            temp[index].faultanalysis=item.faultanalysis
          });
          // console.log(temp)
          this.devStatusData = JSON.parse(JSON.stringify(temp))
  },
  //向增加窗口传值
  addDialogData(row){
    this.addData.eventId = row.id
    this.addData.time =row.date
  },
  modDialogData(row){
    this.modData.eventId = row.id
    this.modData.time = row.date
    this.modData.faultSystem = row.failureSystem
    this.modData.whetherSolve = row.whethersolve
    this.modData.faultPosition= row.faultposition
    this.modData.faultAnalysis= row.faultanalysis
    this.modData.faultCause= row.faultcause
    this.modData.handingMethod= row.handingmethod
    }
  },
  created() {
    this.historyFault()
  },

}
</script>

<style lang="scss" scoped>

表格部分样式
::v-deep .el-table__header tr,
::v-deep .el-table__header th {
  padding: 0;
  height: 2%;
  font-size: 14px;
}
::v-deep .el-table--border, .el-table--group {
    border: none !important;
}
::v-deep .el-table__header {
  border-spacing: 0px;
}
::v-deep .el-table th.gutter{
  display: table-cell!important;
}
::v-deep.el-table–scrollable-y colgroup col[name=‘gutter’]{width:0px}
/* 去掉最下面的那一条线*/
::v-deep .el-table::before {
  height: 0px;
  background-color: transparent;
}
/* 设置表格行高度*/
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
  padding: 0;
  height: 30px;

}
//选中高亮
::v-deep .el-table__body tr.current-row>td {
	color: #fff;
	background: #3979b9!important;
}

//* 设置合并单元格的样式 */
::v-deep .cellAdd {
 
 &>.cell{
 color: #fff;
 margin-left: -55%;
}
}

::v-deep .cellAdd {
  writing-mode:tb-rl
}

/*表格内背景颜色*/
::v-deep.el-table th,
::v-deep.el-table tr,
::v-deep.el-table td {

  /*background-color: #052138;*/
  /*/ / 背景透明 */
  border: 0px;
  color: #93dcfe;
  /*/ / 修改字体颜色 */
  font-size: 14px;
  /* height: 30px; */
  font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
  font-weight: Normal;
}
.buttonInrRow {
  color: #fff;
  font-size: 12px;
  padding: 2px 12px;
  font-size: 12px;
  border-radius: 3px;
  border-color: #93dcfe;
}
/* 日期组件更改样式 */
::v-deep.el-range-editor.el-input__inner{
  background-color:transparent;
  /* height: 5%; */
  /* width: 15%; */
  border-color: #0d4fcf;
}
::v-deep .el-date-editor .el-range-input{
  background-color:transparent ;
  
}
::v-deep.el-picker-panel__body{
  background-color:#061F33 ;
}

::v-deep .el-range-editor--mini .el-range-separator {
  color: #fff;
  
}
::v-deep .el-range-input{
  color: #fff;
}
/* // 设置输入框的背景色、字体颜色、边框属性设置； */
::v-deep .el-input__inner {
  background-color:transparent;
  border-color: #0d4fcf;
   color: #fff;
}
::v-deep .el-input__inner:hover{
  border-color: #0d4fcf;
}
::v-deep .el-input__suffix:hover{
  border-color: #0d4fcf;
}
/* 设置下拉框列表的 padding 值为：0；(即：样式调整) */
::v-deep .el-select-dropdown__list{
  padding: 0 0;
}
/* 按钮切角 */
.buttonAng{
  width: 30%;

  clip-path: polygon(

    15% 0, 100% 0,

    100% 70%,

    85% 100%, 0% 100%,

    0 30%);

    background:linear-gradient(325deg,#079DC2 15%, #0a446C 0) bottom right,    
              linear-gradient(145deg,#079DC2 15%, #0a446C 0) top left
             ;

    background-size: 50% 100%;

    background-repeat: no-repeat;

    border: solid 2px #079DC2;
}
.buttonAngBefore{
  width: 30%;

  clip-path: polygon(

    15% 0, 100% 0,

    100% 70%,

    85% 100%, 0% 100%,

    0 30%);

    background:linear-gradient(325deg,#079DC2 15%, #656b6e 0) bottom right,    
              linear-gradient(145deg,#079DC2 15%, #656b6e 0) top left
             ;

    background-size: 50% 100%;

    background-repeat: no-repeat;

    border: solid 2px #079DC2;
}
::v-deep .el-scrollbar{
  background-color: blue;
}
/* 更改下拉框边收回时框颜色 */
::v-deep .el-select-dropdown {
  border-color: #0d4fcf;
}

/* // 设置下拉框的字体属性及背景颜色； */
.el-select-dropdown__item {
  font-size: 7px;
  line-height: -3%;
  color: #fff;
  font-weight: 200;
  background-color:#052137;

}
/* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
::v-deep .el-popper .popper__arrow,
::v-deep .el-popper .popper__arrow::after {
  display: none;
}
/* // 设置鼠标悬停在下拉框列表的悬停色； */
.el-select-dropdown__item.hover {
  background-color: #0a4E7D;
}
/* // 更改弹窗的左边； */
.itemleft{

}
.itemright{
    height: 20%;
  }
::v-deep .el-textarea__inner{
  background-color:transparent;
  border-color: #0d4fcf;
  color: #fff;
}
</style>
<style lang="scss">
// .datePicker{
//   background-color:#061F33 ;
//   .el-picker-panel__footer{
//     background-color:#061F33 ;
//   }
//   .el-picker-panel__link-btn{
//     // background-color:#061F33 ;
//   }
// }
 .popper__arrow{
  border-style: none !important;
}


.el-dropdown-menu__item{
  border-bottom:1px solid #00487f;
  color: #FFF;
  text-align: center;
}
.el-dropdown-menu__item:not(.is-disabled):hover{
  background-color: #0a446C;
}

/* 消除小三角 */
.el-popper[x-placement^=bottom] .popper__arrow{
  border: none;
}
.el-popper[x-placement^=bottom] .popper__arrow::after{
  border: none;
}
.drowMenu{
  background-color: #052137;
  border-color: #00487f;
  width: 2.8%;
  margin-top: 0.2% !important;
  margin-left: -0.1%;
  padding: 0;
}
 
</style>
